<script setup>
	import { onMounted, ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { http } from '@/utils/http.js'
	import { useUsercodeStore } from '@/store/usercode.js'

	const userCodeStore = useUsercodeStore()

	const username = ref('')
	const mobile = ref('')
	const addressdetail = ref('')
	// 是否默认
	const isMr = ref(0)
	const addressId = ref(-1)
	const addressInfo = ref([])
	const dataTree = ref()

	async function getAddress() {
		const res = await http.request({
			url: '/api/address/getAddress',
			method: 'POST',
			data: {},
		})
		console.log(res)
		dataTree.value = res.data
	}
	const provinceId = ref('')
	const cityId = ref('')
	const areaId = ref('')
	function onchange(e) {
		console.log(e.detail.value[0])
		provinceId.value = e.detail.value[0].value
		cityId.value = e.detail.value[1].value
		areaId.value = e.detail.value[2].value
	}

	//姓名长度提示
	function namelength() {
		if (username.value.length < 2) {
			uni.utils.toast('姓名长度限制2-8位字符')
		} else if (username.value.length > 8) {
			uni.utils.toast('姓名长度限制2-8位字符')
		}
	}

	function setMr() {
		if (isMr.value == 1) {
			isMr.value = 0
		} else {
			isMr.value = 1
		}
	}

	async function set() {
		const res = await http.request({
			url: '/api/address/addAddress',
			method: 'POST',
			data: {
				name: username.value,
				province_id: provinceId.value,
				city_id: cityId.value,
				area_id: areaId.value,
				is_mr: isMr.value,
				mobile: mobile.value,
				address: addressdetail.value,
			},
		})
		console.log(res)
		if (res.st == 1) {
			userCodeStore.setAddress(1)
			uni.navigateBack({ delta: 1 })
		} else {
			uni.utils.toast(res.msg)
		}
	}

	async function edit() {
		const res = await http.request({
			url: '/api/address/editAddress',
			method: 'POST',
			data: {
				name: username.value,
				province_id: provinceId.value,
				city_id: cityId.value,
				area_id: areaId.value,
				is_mr: isMr.value,
				mobile: mobile.value,
				address: addressdetail.value,
				id: addressId.value,
			},
		})
		console.log(res)
		if (res.st == 1) {
			uni.navigateBack({ delta: 1 })
		} else {
			uni.utils.toast(res.msg)
		}
	}

	function setAddress() {
		if (username.value == '') {
			uni.utils.toast('请填写姓名')
			return
		}
		if (mobile.value == '') {
			uni.utils.toast('请填写手机号')
			return
		}
		if (
			provinceId.value == '' ||
			cityId.value == '' ||
			areaId.value == ''
		) {
			uni.utils.toast('请选择所在地区')
			return
		}
		if (addressdetail.value == '') {
			uni.utils.toast('请填写详细地址')
			return
		}
		if (username.value.length < 2) {
			uni.utils.toast('姓名长度限制2-8位字符')
			return
		} else if (username.value.length > 8) {
			uni.utils.toast('姓名长度限制2-8位字符')
			return
		}
		if (addressId.value == -1) {
			set()
		} else {
			edit()
		}
	}
	onMounted(() => {
		getAddress()
	})
	onLoad((option) => {
		if (option.info) {
			console.log(JSON.parse(decodeURIComponent(option.info)))
			provinceId.value = JSON.parse(
				decodeURIComponent(option.info)
			).province_id
			username.value = JSON.parse(decodeURIComponent(option.info)).name
			cityId.value = JSON.parse(decodeURIComponent(option.info)).city_id
			areaId.value = JSON.parse(decodeURIComponent(option.info)).area_id
			isMr.value = JSON.parse(decodeURIComponent(option.info)).is_mr
			mobile.value = JSON.parse(decodeURIComponent(option.info)).mobile
			addressdetail.value = JSON.parse(
				decodeURIComponent(option.info)
			).address
			addressId.value = JSON.parse(decodeURIComponent(option.info)).id
			addressInfo.value = [provinceId.value, cityId.value, areaId.value]
		}
	})
</script>

<template>
	<view style="add-contant" >
		<!-- //列表 -->
		<view class="item-list">
			<view class="list1">
				<view class="name-left">收货人</view>
				<view class="name-right">
					<input
						style="font-size: 24rpx"
						type="text"
						maxlength="8"
						v-model="username"
						placeholder-class="cl"
						placeholder="姓名"
						@blur="namelength"
					/>
				</view>
			</view>

			<view class="list1">
				<view class="name-left">手机号</view>
				<view class="name-right">
					<input
						type="number"
						style="font-size: 24rpx"
						maxlength="11"
						v-model="mobile"
						placeholder-class="cl"
						placeholder="手机号"
					/>
				</view>
			</view>

			<view class="list1">
				<view class="name-left">所在地区</view>
				<view class="name-right" style="margin-left: 32rpx">
					<uni-data-picker
						placeholder="省、市、区"
						popup-title="请选择地址"
						:clear-icon="false"
						:map="{ text: 'name', value: 'id' }"
						:localdata="dataTree"
						v-model="addressInfo"
						@change="onchange"
					>
					</uni-data-picker>
				</view>
			</view>

			<view class="list1">
				<view class="name-left">详细地址</view>
				<view class="name-right">
					<input
						type="text"
						maxlength="60"
						style="font-size: 24rpx"
						v-model="addressdetail"
						placeholder-class="cl"
						placeholder="如小区、楼栋号、门牌号等"
					/>
				</view>
			</view>
			<view
				class="list1"
				style="
					display: flex;
					align-items: center;
					justify-content: space-between;
				"
			>
				<view class="name-left">设为默认地址</view>
				<view class="name-right">
					<switch
						:checked="isMr == 1"
						@change="setMr"
						color="#A181EB"
						style="transform: scale(0.7)"
					/>
				</view>
			</view>
			<view style="margin-left: 30rpx; font-size: 20rpx; color: #9b9b9d">
				提醒：下单会优先使用默认地址
			</view>
		</view>
		<!-- 默认按钮 -->
		<view class="btn"></view>
		<!-- //新增按钮 -->
		<view class="save-btn" @click="setAddress()">
			<image src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/mine/save-address.png"></image>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	
	
	.add-contant{
		min-height: 100vh;
		
		background: #E9EAF2;
	}

	.item-list {
		/* display: flex; */
		width: 100vw;
		background-color: #fff;
		padding: 20rpx 20rpx;
	}
	::v-deep .input-value-border {
		border: none !important;
	}
	.list1 {
		height: 90rpx;
		box-sizing: border-box;
		flex-direction: inherit;

		display: flex;
		margin-top: 30rpx;
		/* background-color: #ddd; */
		/* width: 100%; */
		align-items: center;
		font-family: OPPOSans;
		font-weight: 500;
		font-size: 30rpx;
		color: #3d3d3d;
		margin-left: 30rpx;
		padding-bottom: 40rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}
	.name-left {
		width: 150rpx !important;
		
		font-size: 26rpx;
		/* margin-left: 30rpx; */
	}
	.name-right {
		
		margin-left: 50rpx;
		color: #3d3d3d;
		font-size: 30rpx;
		font-weight: 400;
	}
	.c1 {
		color: #b1b0b8;
	}
	.save-btn {
		width: 100%;
		height: 170rpx;
		position: fixed;
		left: 50%;
		transform: translate(-50%);
		bottom: 0rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		background-color: #fff;
		image{
			width: 628rpx;
			height: 92rpx;
		}
	}
</style>
